<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标线管理</title>
    <style>
        .no_act {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 1%;
            left: 1%;
            display: none;
        }

        .z_index3 {
            z-index: 3;
        }

        .overflow_pic {
            position: relative;
        }

        .pic_size {
            height: 280px;
            width: 260px;
        }

        .pic_list {
            position: absolute;
            z-index: 1;
            transition: 1s;
        }

        .pic_list img {
            float: left;
            height: 280px;
            width: 260px;
        }

        .index {
            display: block;
        }

        .cleanfix {
            overflow: hidden;
            height: 280px;
        }

        .arrow {
            position: absolute;
            top: 180px;
            z-index: 3;
            width: 40px;
            height: 40px;
            font-size: 36px;
            font-weight: bold;
            line-height: 39px;
            text-align: center;
            color: #fff;
            background-color: RGBA(0, 0, 0, .3);
            cursor: pointer;
        }

        .next {
            right: 11%;
        }

        .click_room {
            cursor: pointer;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 10%;
            left: 5%;
            z-index: 2;
        }

        .active {
            /*display: block !important;*/
        }

        .img-content {
            width: 100%;
        }

        .img-content img {
            width: 100%;
            display: none;
        }

        .next2 {
            background-color: #ddd;
            border: none;
        }

        .prev2 {
            background-color: #ddd;
            border: none;

        }

    </style>
</head>
<body>
<div class="box">
    <div class="box-body">
        <table id="mainDataTable" class="table table-bordered table-striped" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>
                    <input onchange="$.checkChange()" type="checkbox" id="batchCheck">
                </th>
                <th>序号</th>
                <th>全景图片</th>
                <th>地址</th>
                <th>道路</th>
                <th>起——止</th>
                <th>养护公司</th>
                <th>采集人</th>
                <th>安装时间</th>
                <th>详情</th>
                <th>操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<!--地图莫泰框-->
<div id="modal-map" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="label-map" aria-hidden="true" style="z-index: 1500">
    <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="$.clearModal($('#form-map'), $('#modal-map'))">
                    <span aria-hidden="true">&times;</span></button>
                <b id="label-map" class="modal-title">地图展示</b>
            </div>
            <div class="modal-body">
                <iframe id="myMap" src="management/roadPoleMap.html"
                        style="width: 100%;height: 365px" frameBorder=0 scrolling=no>
                </iframe>
            </div>
            <div class="modal-footer">
                <div style="float: left;position: relative" id="modalMapRoad">
                    <div style="display: inline-block;">
                        <input type='text' class='form-control' id="startRoad" placeholder="开始路段">
                    </div>
                    <div style="display: inline-block;">
                        <input type='text' class='form-control' id="endRoad" placeholder="结束路段">
                    </div>
                    <i class="no_act" href="javascript:;"></i>

                </div>
                <button type="button" class="btn btn-primary btn-flat" id="subBtn">
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 完成
                </button>
            </div>
        </div>
    </div>
</div>

<!--历史记录模态框-->
<div id="historyModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="historyModalLabel" aria-hidden="true" style="z-index: 1500;">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="$('#historyModal').modal('hide')">
                    <span aria-hidden="true">&times;</span></button>
                <b id="historyModalLabel" class="modal-title">操作记录</b>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <table id="historyDataTable" class="table table-striped table-bordered"
                           cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>事件</th>
                            <th>时间</th>
                            <th>人员</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--二维码模态框-->
<div id="qrcodeModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="showQrcodeLabel" aria-hidden="true" style="z-index: 1500">
    <div class="modal-dialog" style="width: 220px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="$('#qrcodeModal').modal('hide')">
                    <span aria-hidden="true">&times;</span></button>
                <b id="showQrcodeLabel" class="modal-title">二维码</b>
            </div>
            <div id="qrcode" style="padding: 10px">
            </div>
        </div>
    </div>
</div>

<!--图片上传模态框-->
<div id="upPictureModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="upPictureModalLabel" aria-hidden="true" style="z-index: 1500">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="$.closeUpPhModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <b class="modal-title" id="upPictureModalLabel"></b>
            </div>
            <div class="modal-body row">
                <div id="container" class="col-sm-12">
                    <a id="selectfiles" href="javascript:void(0);" class='btn btn-primary'>
                        <span class='glyphicon glyphicon-picture'></span> 选择图片</a>
                    <a id="postfiles" href="javascript:void(0);" class='btn btn-success'>
                        <span class='glyphicon glyphicon-send'></span> 开始上传</a>
                </div>
                <div id="ossfile" class="col-sm-12" style="margin-top: 20px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="$.closeUpPhModal()">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 取消
                </button>
                <button type="button" class="btn btn-success" onclick="$.doneUpPhoto()">
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 完成
                </button>
            </div>
        </div>
    </div>
</div>


<!--图片展示-->
<div id="showPicList" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="showPicLabel" aria-hidden="true" style="z-index: 1500">
    <div class="modal-dialog" style="width: 540px;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="prev2">&lt;</button>
                <button class="next2">&gt;</button>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        onclick="$('#showPicModal').modal('hide')">
                    <span aria-hidden="true">&times;</span></button>
                <b class="modal-title" id="showPicLabel"></b>
            </div>
            <div class="modal-body" style="position: relative">
                <div class="img-content"></div>
            </div>
        </div>
    </div>
</div>

<!--添加编辑模态框-->
<div id="roadLineModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="roadLineLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 820px;">
        <div class="modal-content">
            <form id="roadLineForm" name="roadLineForm"
                  class="form-horizontal" role="form" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            onclick='$.clearModal($("#roadLineForm"), $("#roadLineModal"));$.beDefault()'>
                        <span aria-hidden="true">&times;</span></button>
                    <b class="modal-title" id="roadLineLabel"></b>
                </div>
                <div class="modal-body">
                    <i class="no_act z_index3" href="javascript:null "></i>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">项目编号</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="项目编号"
                                           id="projectNumber" name="projectNumber">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">地址</label>
                                <div class="col-sm-3" style="padding-right: 0">
                                    <select class="form-control" style="padding-right: 10px"
                                            id="province" name="province"></select>
                                </div>
                                <div class="col-sm-3" style="padding-left: 7px; padding-right: 7px">
                                    <select class="form-control" style="padding-right: 10px"
                                            id="city" name="city"></select>
                                </div>
                                <div class="col-sm-3" style="padding-left: 0">
                                    <select class="form-control" style="padding-right: 10px"
                                            id="area" name="area"></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">坐标</label>
                                <div class="col-sm-8" style="padding-right: 0">
                                    <input type="text" class="form-control" placeholder="坐标" style="padding-right: 0"
                                           id="coordinate" name="coordinate">
                                </div>
                                <div class="col-sm-1 z_index3">
                                    <button type="button" id="myBtn" style="height: 34px; float: right">
                                        <i class="fa fa-map-marker"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">路名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="路名"
                                           id="roadLineRoadName" name="roadLineRoadName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">起始路口</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="起始路口"
                                           id="roadLineStartRoad" name="roadLineStartRoad">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">结束路口</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="结束路口"
                                           id="roadLineEndRoad" name="roadLineEndRoad">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">标线里程</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="标线里程"
                                           id="roadLineMileage" name="roadLineMileage">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">安装公司</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="安装公司"
                                           id="roadLineInstallOrg" name="roadLineInstallOrg">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">安装日期</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="安装日期"
                                           id="roadLineInstallTime" name="roadLineInstallTime">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">说明备注</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="说明备注"
                                           id="roadLineRemark" name="roadLineRemark">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">养护公司</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="养护公司"
                                           id="roadLineOrgName" name="roadLineOrgName" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">采集员</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="采集员"
                                           id="roadLineCreatorName" name="roadLineCreatorName" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group cleanfix">
                                <label class="col-sm-3 control-label">标线照片</label>
                                <div class="col-sm-9 overflow_pic" style="height: 280px;">
                                    <div class="pic_list" style="top: 0px">
                                        <img id="roadLinePhotoImg" src="">
                                    </div>
                                    <i class="click_room" onclick="$.openUpPic()"></i>
                                    <a href="javascript:;" class="arrow prev">&lt;</a>
                                    <a href="javascript:;" class="arrow next">&gt;</a>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">保修期</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="roadLinePeriod" name="roadLinePeriod">
                                        <option value="1">1年</option>
                                        <option value="2">2年</option>
                                        <option value="3">3年</option>
                                        <option value="4">4年</option>
                                        <option value="5">5年</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">使用年限</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="roadLineServiceLife" name="roadLineServiceLife">
                                        <option value="1">1年</option>
                                        <option value="2">2年</option>
                                        <option value="3">3年</option>
                                        <option value="4">4年</option>
                                        <option value="5">5年</option>
                                        <option value="6">6年</option>
                                        <option value="7">7年</option>
                                        <option value="8">8年</option>
                                        <option value="9">9年</option>
                                        <option value="10">10年</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">监管单位</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="roadLineMainOrgId" name="roadLineMainOrgId">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">标线类型</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="roadLineType" name="roadLineType">
                                        <option value="0">指示标线</option>
                                        <option value="1">禁止标线</option>
                                        <option value="2">警告标线</option>
                                        <option value="3">其他标线</option>
                                        <option value="4">警示柱</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group" id="graphic">
                                <label class="col-sm-3 control-label">图示 </label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="roadLineGraphic" name="roadLineGraphic">
                                        <option value="0">纵向指示标线</option>
                                        <option value="1">横向指示标线</option>
                                        <option value="2">其他指示标线</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="roadLineId" name="roadLineId"/>
                <input type="hidden" id="roadLineProvince" name="roadLineProvince"/>
                <input type="hidden" id="roadLineCity" name="roadLineCity"/>
                <input type="hidden" id="roadLineArea" name="roadLineArea"/>
                <input type="hidden" id="roadLineLongitude" name="roadLineLongitude"/>
                <input type="hidden" id="roadLineLatitude" name="roadLineLatitude"/>
                <input type="hidden" id="roadLineRegionId" name="roadLineRegionId">
                <input type="hidden" id="roadLineCreatorId" name="roadLineCreatorId"/>
                <input type="hidden" id="roadLineModifierId" name="roadLineModifierId"/>
                <input type="hidden" id="roadLineOrgId" name="roadLineOrgId"/>
                <input type="hidden" id="roadLinePhoto" name="roadLinePhoto"/>
                <input type="hidden" id="roadLinePoints" name="roadLinePoints">
                <div class="modal-footer" id="defaultFooter">
                    <button type="button" class="btn btn-warning pull-left btn-flat" data-dismiss="modal"
                            onclick='$.clearModal($("#roadLineForm"), $("#roadLineModal"))'>
                        <i class="fa fa-trash-o"></i> 取消
                    </button>
                    <button type="submit" class="btn btn-primary btn-flat">
                        <i class="fa fa-save"></i> 保存
                    </button>
                </div>
                <div class="modal-footer" id="specialFooter" style="display: none;">
                    <button type="button" class="btn btn-primary pull-left btn-flat"
                            onclick='$.showHistory($("#roadLineId").val())'>
                        <i class="glyphicon glyphicon-th-list"></i> 事件历史
                    </button>
                    <button type="button" class="btn btn-primary btn-flat" data-dismiss="modal"
                            onclick='$.clearModal($("#roadLineForm"), $("#roadLineModal"));$.beDefault()'>
                        <i class="fa fa-save"></i> 确定
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
<script src="../plugins/oss-h5-upload-js-direct/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script src="../plugins/oss-h5-upload-js-direct/lib/crypto1/crypto/crypto.js"></script>
<script src="../plugins/oss-h5-upload-js-direct/lib/crypto1/hmac/hmac.js"></script>
<script src="../plugins/oss-h5-upload-js-direct/lib/crypto1/sha1/sha1.js"></script>
<script src="../plugins/oss-h5-upload-js-direct/lib/base64.js"></script>
<script src="../plugins/oss-h5-upload-js-direct/upload.js"></script>
<script src="management/qrcode.js"></script>
<script src="management/roadLineManage.js"></script>
</html>